<template>
  <div class="indivdual">
    <van-nav-bar title="个人中心" fixed class="navbar">
            <template #left >
        <van-button @click="$store.commit('logout')"  class="navbar-tuichu"> 退出登录</van-button>
      </template>
      <template #right>
        <router-link to="/login"> 登录</router-link>
      </template>
    </van-nav-bar>
    <template>
      <div class="login-top">
        <div class="login-touxiang" v-if="$store.state.username">
          <img src="../../public/avatar/152.jpg" />
        </div>
        <div class="login-touxiang" v-else>
          <img src="../../public/avatar/63.jpg" />
        </div>

        <div class="yonghuxinxi" v-if="$store.state.username">
          <span>昵称：{{$store.state.username}}</span>
          <span>普通会员</span>
          <div>
          <span>会员编号:{{$store.state.userid}}</span></div>
        </div>
         <div class="yonghuxinxi" v-else>
          <span>昵称:请先登录</span>
          <span>普通会员</span>
          <span>会员编号:登陆后获取</span>
        </div>
      </div>
      <my-bottom />
    </template>
    <van-panel title="我的订单" >
      <template #footer>
        <van-grid>
            <van-grid-item @click="Goshoucang"  icon="like-o" text="我的收藏" />
           <van-grid-item @click="weizhifu"  icon="shop-collect" text="待使用" />
          <van-grid-item @click="yizhifu" icon="balance-list" text="已使用" />
          <van-grid-item @click="tuikuan"  icon="bag" text="退款订单" />
        </van-grid>
      </template>
    </van-panel>

    <van-panel title="更多服务">
      <div class="login-bottom">
        <ul>
          <!-- <li>
    <svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-shoujichongzhi"></use>
   </svg>
      <span>我的申请</span>
        </li> -->
          <!-- <li>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-piaowuxitong"></use>
            </svg>
            <span>我的票务</span>
          </li> -->
          <li @click="GoHistory()">
            <svg class="icon" aria-hidden="true">
              <use
                xlink:href="#icon-shoucang"
              ></use>
            </svg>
            <span>历史通知</span>
          </li>
          <!-- <li>
    <svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-youhuiquan
"></use>
   </svg>
      <span>我的优惠券</span>
        </li> -->
          <li @click="Gokf()">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jifen"></use>
            </svg>
            <span >客服电话</span>
          </li>
          <li @click="GoMz()">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gouwuche"></use>
            </svg>
            <span >免责声明</span>
          </li>
          <li @click="Gogyme()">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-bianji"></use>
            </svg>
            <span>关于我们</span>
          </li>
        </ul>
      </div>
    </van-panel>
  </div>
</template>
<script>
import MyBottom from "@/components/MyBottom.vue";
import { mapMutations } from 'vuex';

export default {
props:['state'],
  components: { MyBottom },
  data() {
    return {
      active: 5,
    };
  },
  methods: {
      weizhifu(){
      this.$router.push('/weizhifu')
    },
    yizhifu(){
      this.$router.push('/dingdan')
    },
    tuikuan(){
      this.$router.push('/tuikuan')
    },

    Gologin() {
      this.$router.push("/login");
    },
    Goshoucang(){
      this.$router.push('/Myshoucang')
    },
    Gokf(){
  this.$dialog.alert({
   title: '客服电话',
    message:'0631 - 5287966'
  })
    },
     GoMz(){
this.$router.push('/exon')
    },
        Gogyme(){
  this.$dialog.alert({
   title: '关于我们',
    message:'五台山小组团队，帅哥靓女聚集地'
  })
    },
  GoHistory(){
  
this.$router.push('/history')
    },
    
  
  }
};
</script>
<style scoped src="../assets/css/login.css"></style>
<style src="../assets/css/main.css"></style>

